<template>
  <div class="weekend">
    <div class="tytle">
      <h3>周末去哪儿</h3>
    </div>
    <ul class="content">
      <li v-for="item in weekendList" :key="item.id">
        <router-link class="goto" to>
          <img
            :src="item.imgUrl"
            alt
          >
          <div class="product-info">
            <div class="small-tytle">{{item.tytle}}</div>
            <div class="tytle-desc">{{item.info}}</div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      'weekendList': [{
        'id': '111',
        'imgUrl': 'http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg',
        'tytle': '清远周边逛',
        'info': '人人都有一双发现美的眼睛，身边的事物最熟悉不过，那你可曾发现了被人遗漏的美？'
      },
      {
        'id': '121',
        'imgUrl': 'http://img1.qunarzz.com/sight/source/1811/b8/5d599bbdcf8b57.jpg_r_640x214_2ee055e3.jpg',
        'tytle': '浮在海上的绿洲',
        'info': '南国滨海之城，避寒胜地，有暖暖的阳光，海风习习，吃着海鲜逛逛老街多惬意啊'
      },
      {
        'id': '131',
        'imgUrl': 'http://img1.qunarzz.com/sight/source/1602/9c/39c5ce9ff58609.jpg_r_640x214_efb90102.jpg',
        'tytle': '粤西温泉',
        'info': '自驾粤西，这里有最全最心仪的温泉池，环境优美，舒舒服服的泡个热汤，远离繁忙的工作'
      },
      {
        'id': '141',
        'imgUrl': 'http://img1.qunarzz.com/sight/source/1812/fe/208e0360d686b8.jpg_r_640x214_7b9e6607.jpg',
        'tytle': '广州泡汤圣地',
        'info': '解压之地，放松自己，来一段轻松的旅程。'
      },
      {
        'id': '151',
        'imgUrl': 'http://img1.qunarzz.com/sight/source/1505/92/580e9ea4f37a1b.jpg_r_640x214_72112761.jpg',
        'tytle': '广州必打卡',
        'info': '感受现代与传统相融合的广州'
      }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
h3 {
  height: 0.8rem;
  padding-left: 0.26rem;
  line-height: 0.8rem;
  color: #212121;
}
.content {
  width: 100%;
  .goto {
    display: block;
     background: #fff;
    margin-bottom: .1rem;
    img {
      width: 100%;
    }
    .product-info {
      position: relative;
      padding: 0.14rem 0.2rem 0.2rem 0.2rem;
      .small-tytle {
        overflow: hidden;
        padding-right: 1.4rem;
        color: #212121;
        font-size: 0.28rem;
        line-height: 0.48rem;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .tytle-desc {
        overflow: hidden;
        padding-right: 1.4rem;
        color: #616161;
        font-size: 0.24rem;
        line-height: 0.42rem;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
